<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 
    vue有两种数据绑定方式：
    1.单向绑定（v-bind）：数据只能从data流向页面
    2.双向绑定（v-model）：data <==> 页面
        备注：
            双向绑定一般用在表单类元素上：比如input、select
            v-model:value 可以简写成 v-model ，因为v-model默认收集的就是value
    -->
     <div id="root">
        <input type="text" v-bind:value="name1">
        <input type="text" v-model:value="name2">
     </div>
    <script type="text/javascript">
        Vue.config.productionTip = false
        const vm=new Vue({
            el:"#root",
            data:{
                name1:"尚硅谷",
                name2:"黑马程序员"
            }
        })
    </script>
</body>
</html>